<template>
	<view class="conetentinfo-wrap">
		
		<cu-custom bgColor="#ffffff" :isBack="true" textColor="#000000">
			<block slot="backText">返回</block>
			<block slot="content">{{titleStr}}</block>
		</cu-custom>
		
		<!-- 内容列表 -->
		<view class="course-wrap" style="background-color:#f6f6f6;padding-bottom: 50rpx;padding-top: 14rpx;">
			<view class="box" style="    border-radius: 16rpx;
    background-color: #fff;
    padding-top: 10rpx;
    margin: 4px 15rpx;">
				<view @click="viewContentInfo(item.kechengId)"
							class="live-list" v-for="(item, index) in kechengList"  
							:key="index"
							style="height: 240rpx;"
							>
						<view class="live-list-img-wrap" style="margin-top: 37rpx;">
							<image class="live-list-img" :src="item.kechengImg" mode="aspectFill"></image>
				<!-- 			<text class="course-title-icon">内容</text> -->
						</view>
						<view class="live-list-info">
							<view class="live-c-title" style="height: 40rpx;">{{item.kechengName}}</view>
							<view class="live-status-tuwen">
								视频
							</view>
							<view class="live-teacher-price">
								<image class="live-teacher-avatar" :src="item.teacherImg" mode="aspectFill"></image>
								<text class="teacher-name">{{item.kechengTeacher}}</text>
								<view class="price-wrap">
									<text class="free">免费</text>
								</view>
							</view>
							<view class="" style="color: rgb(102, 102, 102);">{{item.showDetp}}</view>
						</view>
					</view>
				</view>
			</view>
		
		
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				theme: app.globalData.theme.backgroundColor, //全局颜色变量
				
				titleStr:"",
				kechengList:[],
			}
		},
		onLoad(option){
			this.getKechengList(option.str);
		},
		methods: {
			
			getKechengList(str){
				if(str == 'remen'){
					this.titleStr = "热门课程";
					uni.request({
						url: app.globalData.serve_study_url + "kechengList",
						method: 'GET',
						data: {
							'kechengState':'0',
							'kechengIsFufei':'0',
						},
						success: res => {
							this.kechengList = res.data.rows;
						},	
					});
				}else if(str == 'xilie'){
					this.titleStr = "系列课程";
					uni.request({
						url: app.globalData.serve_study_url + "kechengList",
						method: 'GET',
						data: {
							'kechengState':'0'
						},
						success: res => {
							this.kechengList = res.data.rows;
						},	
					});
				}
			},
			
			// 跳转看课页面
			viewContentInfo(kechengId) {
				uni.navigateTo({
					url: '../../packageB/pages/content-info/content-info?kechengId=' + kechengId,
				});
			},
			
		}
	}
</script>

<style>
	/* 大班课内容列表公共样式 */
	@import url("/static/css/course_list.css");
	
	.conetentinfo-wrap {
		padding-top: 2rpx;
		min-height: 1500rpx;
		background-color: #FAFAFA;
	}
	.free{
    padding-left: 20rpx;
	padding-top: 7rpx;
    background-color: rgb(234, 255, 244);
    height: 45rpx;
    width: 70rpx;
    line-height: 40rpx;
    border-radius: 11rpx;
	}
	.live-status-tuwen{
    width: 59rpx;
    color: #3694EF;
    border-color: #3694EF;
    font-size: 21rpx;
	}
	.live-list {
		width: 95%;
		height: 190rpx;
		margin: 30rpx auto;
		padding-top: 20rpx;
		border-radius: 5rpx;
		background-color: #FFFFFF;
	}
	
	.live-c-title {
		line-height: 35rpx;
		height: 40%;
	}
	
	.live-teacher-price {
		margin-top: 10rpx;
	}
	
	.price-wrap {
		margin-left: 55% !important;
	}
</style>
